<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择门店</title>
    <link rel="shortcut icon" href="<%=path%>/favicon.ico">
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/css/mushroom.css" rel="stylesheet">
    <%-- <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" /> --%>
    <style>
        .s_title {
            text-align: center;
            margin-top: 5%;
            padding-bottom: 16px;
            border-bottom: 3px solid #1ab394;
        }

        .col-sm-10 .wrapper {
            background: #fff;
            margin-top: 30px;
        }

        .col-sm-10 .wrapper span {
            color: #999;
        }

        .m_xpages .mian {
            width: 470px;
            margin: 0 auto;
        }

        .col-sm-12 .i-checks {
            position: absolute;
            right: 10px;
            display: none;
        }

        .m_xpages .mian span {
            color: #bdbdbd;
            font-size: 12px;
            line-height: 30px;
            float: left;
        }

        .m_xpages .mian select {
            -webkit-appearance: none;
            height: 30px;
            border: 1px solid #e3e3e3;
            border-radius: 3px;
            width: 60px;
            color: #666;
            text-align: center;
            background: #fff url(../images/sele.png) no-repeat 90% center;
            float: left;
        }

        .m_xpages .mian a,
        .m_xpages .mian .text {
            float: left;
            height: 30px;
            border: 1px solid #e3e3e3;
            border-radius: 3px;
            width: 60px;
            color: #666;
            text-align: center;
            font-size: 12px;
            color: #666;
            line-height: 28px;
            background: #fff;
        }

        .m_xpages .mian a.pageDisable {;
            color: #bdbdbd;
        }

        .m_xpages .mian .text {
            width: 46px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="col-sm-1"></div>
<div class="col-sm-10">
    <h3 class="text-navy s_title">选择门店</h3>
    <div class="wrapper wrapper-content animated fadeInRight">
        <p style="text-align:center;color:#666">请选择所在门店，添加会员时会根据您的所在门店设置会员的归属门店</p>
        <div class="row" id="tbody"></div>
        <div style="height: 20px;">
            <div class="m_xpages" style="width:100%;margin:0;">
                <div class="mian" style="margin-left: 400px;">
                    <a href="javascript:;" class="prev" style="margin-right:160px;">上一页</a>
                    <a href="javascript:;" class="next">下一页</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-1"></div>
<p style="position:absolute;bottom:30px;width:100%;text-align: center;">zhfeat</p>
<script src="<%=path%>/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/loading.js"></script>
<script>

    $(document).ready(function () {
        $(".contact-box").each(function () {
            animationHover(this, "pulse")
        });
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });

    $('.contact-box a').click(function () {
        $(this).find('.i-checks').show();
    });
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script type="text/javascript">
    /* LeeX */
    //分页
    var startIndex = 0;
    var pageSize = 6;
    var currentPage = 1;
    var pageCount = 0;

    $(function () {
        getStoreList();
    });

    function getStoreList() {
        $.ajax({
            type: "POST",
            url: "<%=path%>/api/login/perInforShow",
            dataType: "json",
            data: {startIndex: startIndex, pageSize: pageSize},
            success: function (data) {
                if (data.error_code == "0") {
                    page(data.totalCount);
                    storeHtml(data);

                }
            }
        });
    }

    function save_(storeId) {
    	$(".i-checks").hide();
        $("#" + storeId).find('.i-checks').show();
        $.ajax({
            type: "POST",
            async: true,
            url: "<%=path%>/api/login/toSaveStoreId",
            data: {"storeId": storeId},
            success: function () {
                window.location.href = "<%=path%>/ui/main";
            }
        });
        return false;
    };

    function storeHtml(data) {
        var storelist = data.storeList;
        var html = "";
        for(var i=0;i<storelist.length;i++){
        	if((i%3==0||i==0)){
        		console.log("i---->"+i);
        		html+="<div class='col-sm-12'>";
        	}
            html += "<div class='col-sm-4'><div class='contact-box' id='"+storelist[i]['store_id']+"'><a href='javascipt:;' onclick='save_("+storelist[i]['store_id']+")'><div class='col-sm-12'><div class='radio i-checks'><label class=''><div class='iradio_square-green checked' style='position: relative;'><input type='radio' value='option1' name='a' style='position: absolute; opacity: 0;'><ins class='iCheck-helper' style='position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;'></ins></div><i></i></label></div><h3><strong>"+storelist[i]['name']+"</strong></h3><p><span>电话:</span>"+storelist[i]['phone']+"</p><p><span>地址:</span>"+storelist[i]['address']+"</p></div><div class='clearfix'></div></a></div></div>";
            if((i%3==2&&i!=0)||(i==storelist.length-1)){console.log("i--22-->"+i);
            	html+="</div>";
            }
        }
        $('#tbody').html(html);
        
        if(data.totalCount<7){
        	$('.m_xpages').hide();
        }else{
        	$('.m_xpages').show();
        }
    }

    /* 分页 */
    $(".m_xpages select").change(function () {
        pageSize = Number($(this).val());
        getStoreList();
    });

    $(".m_xpages a.prev").click(function () {
        $('.next').html('<font color="black">下一页</font>');
        if (currentPage > 1) {
            currentPage--;
            startIndex -= pageSize;
            if (currentPage == 1) {
                $('.prev').html('<font color="#E0E0E0">上一页</font>');
            }
            $('#BIGDraw').html("");
            getStoreList();
        }
    });
    $(".m_xpages a.next").click(function () {
        $('.prev').html('<font color="black">上一页</font>');
        if (currentPage < pageCount) {
            currentPage++;
            startIndex += pageSize;
            if (currentPage == pageCount) {
                $('.next').html('<font color="#E0E0E0">下一页</font>');
            }
            getStoreList();
        }
    });

    $(".m_xpages :text").keyup(function (e) {
        if (e.keyCode == 13) {
            var pageGo = $(this).val();
            if (/^[0-9]+$/.test(pageGo)) {
                pageGo = Number(pageGo);
                if (pageGo < 1 || pageGo > pageCount) {
                    func_artdialog("提示", '页数不存在！');
                } else if (pageGo != currentPage) {
                    startIndex = (pageGo - 1) * pageSize;
                    getStoreList();
                }
            } else {
                func_artdialog("提示", "请输入合法页数！");
            }
        }
    });

    function func_artdialog(name, value) {
        var d = dialog({
            title: name,
            fixed: true,
            width: 200,
            height: 100,
            content: "<center style='font-size:20px; line-height:100px;'>" + value + "</center>",
            okValue: "确定",
            ok: function () {
                return true;
            }
        });
        d.show();
    }

    function page(totalCount) {
        pageCount = totalCount / pageSize;
        var count = totalCount % pageSize;
        if (count > 0) {
            pageCount++;
        }
        pageCount = parseInt(pageCount);
        currentPage = startIndex / pageSize + 1;
        currentPage = parseInt(currentPage);

        if (currentPage == 1) {
            $(".prev").addClass("pageDisable");
        } else {
            $(".prev").removeClass("pageDisable");
        }

        if (currentPage == pageCount || pageCount == 0) {
            $(".next").addClass("pageDisable");
        } else {
            $(".next").removeClass("pageDisable");
        }

        $(".m_xpages>.mian>span:eq(1)").text('共' + totalCount + '条');
        $(".m_xpages>.mian>span:eq(2)").text(currentPage + '/' + pageCount + '页');
    }
</script>
</body>
</html>
